<template>
  <el-dialog title="提示" :visible="dialogVisible" width="30%" :before-close="handleClose">
    <el-form ref="permissRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="权限标题" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirmFn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermission, editPermission } from '@/api/permission'
const rules = {
  title: [{ required: true, trigger: 'blur', message: '请输入权限标题' }],

  code: [{ required: true, trigger: 'blur', message: '请输入权限标识' }],
  description: [{ required: true, trigger: 'blur', message: '请输入权限描述' }]
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      formData: {
        title: '',
        code: '',
        description: ''
      },
      rules: rules
    }
  },
  methods: {
    // 编辑数据回显
    editHandleParamsFn(data) {
      this.formData = data
    },
    // 确定编辑或新增
    confirmFn() {
      this.$refs.permissRef.validate(async (verify) => {
        if (verify) {
          if (this.formData.id) {
            // 编辑
            await editPermission(this.formData)
          } else {
            // 新增
            await addPermission(this.formData)
          }
          this.$message.success('操作成功')
          // 操作完成后刷新数据，清空
          this.handleClose()
          this.$emit('updatePermission')
        }
      })
    },
    addHandleParamsFn(pid, type) {
      this.formData.pid = pid
      this.formData.type = type
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.permissRef.resetFields()
      this.formData = { title: '', code: '', description: '' }
    }
  }
}
</script>

<style></style>
